<template>
    <!--    测试内容    -->
    <div id="list-demo" class="list">
        <button @click="add">Add</button>
        <button @click="remove">Remove</button>
        <button @click="shuffle">Shuffle</button>
        <!--      通过tag指定transition-group的真实标签，现在指定为p标签，相当于transition-group = p      -->
        <transition-group name="list" tag="p" appear>
                <span v-for="item in items" :key="item" class="list-item">
                    {{item}}
                </span>
        </transition-group>
    </div>

    <!--    搜索栏动效,设置ref方便vue查找    -->
    <div id="staggered-list-demo" ref="staggered_list">
        <input type="text" v-model="queryKeyWord"/>
        <transition-group
                name="staggered-fade"
                v-bind:css="false"
                @before-enter="beforeEnter"
                @enter="enter"
                @leave="leave"
                tag="ul">
            <li v-for="(item,index) in computedList" v-bind:key="item"
                v-bind:data-index="index">
                {{item}}
            </li>
        </transition-group>
    </div>
</template>

<script>
    // DES: 定义列表标签类
    let target;

    // DES: 加载远程Js文件
    function launchRemoteJs(url) {
        // DES: Vue挂载的时候，创建Dom引入远程Js文件
        const scriptDom = document.createElement('script');
        scriptDom.type = "text/javascript";
        scriptDom.src = url;
        document.body.appendChild(scriptDom)
    }

    export default {
        name: "TestView",
        mounted() {
            launchRemoteJs("https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js");
            launchRemoteJs("https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js");
            target = this.$refs.staggered_list;
        },
        data() {
            return {
                isShow: true,
                items: [
                    "Rayman", "Monki",
                    "Mike", "Jone",
                    "Girl", "Boy",
                    "Boycutt", "Jack",
                    "Milly", "Lili"],
                index: 0,
                queryKeyWord: ""
            }
        },
        methods: {
            randomIndex: function () {
                return Math.floor(Math.random() * this.items.length)
            },
            add() {
                this.index++;
                this.items.splice(this.randomIndex(), 0, "Test:" + this.index);
            },
            remove() {
                this.items.splice(this.randomIndex(), 1);
            },
            shuffle: function () {
                this.items = _.shuffle(this.items)
            },
            // DES: 通过JS执行动画，类似动画执行，都可以传递标签参数el
            beforeEnter: function (el) {
                el.opacity = 0;
                el.height = 0;
            },
            enter: function (el, done) {
                let delay = el.dataset.index * 150;
                setTimeout(function () {
                    Velocity(
                        el,
                        {opacity: 1, height: "1.6em"},
                        {complete: done})
                }, delay)
            },
            leave: function (el, done) {
                let delay = el.dataset.index * 150;
                setTimeout(function () {
                    Velocity(
                        el,
                        {opacity: 0, height: 0},
                        {complete: done}
                    )
                }, delay)
            }
        },
        computed: {
            // DES: 列表匹配
            computedList() {
                let vm = this;
                return this.items.filter(function (item) {
                    return item.toLocaleLowerCase().indexOf(vm.queryKeyWord.toLocaleLowerCase()) !== -1
                })
            }
        }
    }
</script>

<style scoped>

    * 自定义进入动画开始帧 */
    .title-fade-in-enter {
        /* 动画开始之前往下移10个px，同时透明度为0 */
        transform: translateY(10px);
        opacity: 0;
    }

    /* 自定义动画执行状态 */
    .title-fade-in-enter-active {
        /* 动画执行过程中设置全部属性均运用动画 */
        transition: all .3s ease;
        transition-delay: .2s;
        /*transition-property: opacity;*/
        animation: title_fade_in .5s;
        animation-delay: 2s;
    }

    /* 替换默认的transition类 */
    .title-fade-in-active {
        transition: opacity .3s ease;
        transition-delay: .2s;
    }

    /* 自定义关键帧动画 */
    @keyframes title_rotate {
        0% {
            rotation: 50deg;
        }
        50% {
            rotation: 120deg;
        }
        100% {
            rotation: 0deg;
        }
    }

    /* 列表动画 */
    .list-item {
        display: block;
    }

    /* 列表动画执行 */
    .list-enter-active, .list-leave-active {
        transition: all .5s;
    }

    .list-move {
        transition: transform 1s;
    }

    /* 列表动画执行起始设置与结束设置 */
    .list-enter, .list-leave-to {
        transform: translateY(20px);
        opacity: 0;
    }
</style>
